<template>
    <div>
         <!-- 查询 -->
        <el-popover placement="bottom-start" width="1018" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="searchList" class="demo-ruleForm">
                <el-form-item label="血浆编码" style="margin-bottom: 0;"><el-input v-model="searchList.plasmaNo" style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="机器编号" style="margin-bottom: 0;">
                    <el-select  v-model="searchList.machineNo" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option  v-for="item in machineData" :key="item.id" :value="item.code" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="浆袋扫描时间" style="margin-bottom: 0;" >
                    <el-date-picker
                        v-model="searchList.plasmaScanTime"
                        type="date"
                        placeholder="选择日期时间" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="献浆人" style="margin-bottom: 0;"><el-input v-model="searchList.providerNo" style="width: 100px;"></el-input></el-form-item>
                <el-button type="primary"  @click="heatSealList">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
         <el-button type="primary" @click="updateDialog('boxConf')" v-if="boxConfShow" style="margin-left:10px;">装箱单配置</el-button>
         <el-button type="primary" @click="updateDialog('inputStore')" v-if="boxConfShow">扫描入库</el-button>
         <!-- 表格 -->
         <el-table :data="heatSealDataList" stripe border class="company-table" style="width: 100%;" :height="tableHeight"  v-loading="loading">
            <el-table-column prop="plasmaNo" label="血浆编码" sortable min-width="90"></el-table-column>
            <el-table-column prop="machineNo" label="机器编号" sortable min-width="90"></el-table-column>
            <el-table-column prop="plasmaScanTime" label="浆袋扫描时间" sortable min-width="90">
                <template slot-scope="scope">
                    <div v-html="timestampToTime(scope.row.plasmaScanTime,'yyyy-mm-dd hh:mm:ss')"></div>
                </template>
            </el-table-column>
            <el-table-column prop="provideNoName" label="献浆人" sortable min-width="90"></el-table-column>
            <el-table-column prop="lastWeght" label="热合后重量" sortable min-width="90"></el-table-column>
            <el-table-column prop="createNurseName" label="热合护士" sortable min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog('edit',scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 详情 -->
        <el-dialog  :title="dialogConfig.title" :visible.sync="dialogConfig.isShow"  width="1000px" top="60px" :close-on-click-modal="false"  v-dialogDrag>
            <div v-if="dialogConfig.type=='edit'||dialogConfig.type=='inputStore'">
                <div :style="dialogHeight">
                    <el-form v-if="dialogConfig.type=='inputStore'"  :inline="true" :model="singleheatSeal" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
                    <h3  class="dialog-plate-title"><span>扫描信息</span></h3>
                        <el-form-item label="卡号"><input   class="el-input__inner" v-focus v-if="dialogConfig.isShow" type="text" v-model="singleheatSeal.cardId" ref="inputStoreBox" @keypress.enter="searchInfo"/> </el-form-item>
                         <el-form-item><el-button type="success" style="float:right;margin-right:-10px; background-color:#3ac1c4;border: 1px solid #DCDFE6;" @click="searchInfo" >确定</el-button></el-form-item>
                        <el-form-item label="自动入库">
                            <!-- <el-checkbox v-model="singleheatSeal.autoPrint"   @change="autoPrintChange"></el-checkbox> -->
                                <div class="checkboxFour">
                                    <input type="checkbox" id="checkboxFourInput" v-model="singleheatSeal.autoPrint" @change="autoPrintChange" style="margin-left:5px;"/>
                                    <label for="checkboxFourInput"></label>
                                 </div>
                            <!-- <el-switch
                                    :value="singleheatSeal.autoPrint"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"   
                                    active-text="开"
                                    inactive-text="关"
                                    :active-value="true"
                                    :inactive-value="false"
                                    @change.native="autoPrintChange"
                                  >
                            </el-switch> -->
                        </el-form-item>   
                    </el-form>
                    <h3 class="dialog-plate-title"><span>基本信息</span></h3>
                    <!-- 浆员基本信息 -->
                    <pulpwork-info   v-bind:cardid="singleheatSeal.providerNo"></pulpwork-info>
                    <h3 class="dialog-plate-title" style="margin-top: 15px;"><span>热合信息</span></h3>
                    <el-form :inline="true" :model="singleheatSeal" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="血浆编码"><el-input v-model="singleheatSeal.plasmaNo" disabled></el-input></el-form-item>
                        <el-form-item label="机器编号"><el-input v-model="singleheatSeal.machineNo" disabled></el-input></el-form-item>
                        <el-form-item label="采浆重量">
                            <el-input v-model="singleheatSeal.plasmaWeight" disabled>
                                <template slot="append">g</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="采浆袋皮重" >
                            <el-input v-model="singleheatSeal.plasmaBagWeiht" disabled>
                                <template slot="append">g</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="采浆袋总重" >
                            <el-input v-model="singleheatSeal.plasmaBagTotal" disabled>
                                <template slot="append">g</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="复核重量">
                            <el-input v-model="singleheatSeal.recheckWeight" >
                                <template slot="append">g</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="热合后重量">
                            <el-input v-model="singleheatSeal.lastWeght">
                                <template slot="append">g</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="浆袋扫描时间"><el-input v-model="singleheatSeal.plasmaScanTime" disabled></el-input></el-form-item>
                        <el-form-item label="创建时间"><el-input v-model="singleheatSeal.createTime" disabled ></el-input></el-form-item>
                        <el-form-item label="结束时间"><el-input v-model="singleheatSeal.endTime" disabled></el-input></el-form-item>
                        <el-form-item label="热合护士"><el-input v-model="singleheatSeal.createNurseName" disabled ></el-input></el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button type="success" @click="submitDialog" style="background-color:#3ac1c4;border: 1px solid #DCDFE6;">提交</el-button>
                </div>
            </div>
            <div v-else-if="dialogConfig.type=='boxConf'">
                <el-button type="primary" @click="changeDialog('addBoxConf')"><i class="el-icon-plus"></i>新增</el-button>
                <el-table :data="boxConfList" stripe border  style="width: 100%;" >
                    <el-table-column prop="makerNameString" label="厂商名称" sortable></el-table-column>
                    <el-table-column prop="immuneTypeName" label="供浆类型" sortable min-width="70"></el-table-column>
                    <el-table-column prop="plasmaStartNo" label="血浆起始编号" sortable min-width="90"></el-table-column>
                    <el-table-column prop="plasmaEndNo" label="血浆结束编号" sortable min-width="90"></el-table-column>
                    <el-table-column prop="boxStartNo" label="箱号开始编码" sortable min-width="90"></el-table-column>
                    <el-table-column prop="boxEndNo" label="箱号结束编码" sortable min-width="90"></el-table-column>
                    <el-table-column prop="encasementCount" label="装箱数量" sortable min-width="70"></el-table-column>
                    <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                        <template slot-scope="scope">
                            <el-button @click="changeDialog('editBoxConfig',scope.row)"  type="text" size="small">修改</el-button>
                            <el-button  @click="deleteBoxConf(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 列表 -->
            </div>
            <div v-else-if="dialogConfig.type=='addBoxConf'|| dialogConfig.type=='editBoxConfig'">
                <el-form ref="form" :model="boxConf" label-width="80px" :rules="boxConfRules">
                    <el-form-item label="厂商名称" prop="makeName" required>
                        <el-select v-model="boxConf.makeName" placeholder="请选择厂商名称">
                        <el-option :label="item.name" :value="item.id" v-for="item in maker" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="免疫类型" prop="immuneType" required >
                        <el-select v-model="boxConf.immuneType" placeholder="请选择免疫类型">
                            <el-option :label="item.name" :value="item.id" v-for="item in jylxId" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="血浆编号" required>
                        <el-row type="flex" class="row-bg">
                            <el-col :xs="11" :sm="11" :md="8" :lg="8" :xl="8">
                                <el-form-item prop="plasmaStartNo">
                                    <el-input v-model="boxConf.plasmaStartNo" placeholder="请输入起始编号" ></el-input>
                                </el-form-item>

                            </el-col>
                            <el-col class="line" :span="2" tag="div">-</el-col>
                            <el-col :xs="11" :sm="11" :md="8" :lg="8" :xl="8">
                                <el-form-item prop="plasmaEndNo">
                                     <el-input v-model="boxConf.plasmaEndNo" placeholder="请输入结束编号" ></el-input>
                                </el-form-item>

                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="箱子编号" required>
                        <el-row type="flex" class="row-bg">
                            <el-col :xs="11" :sm="11" :md="8" :lg="8" :xl="8">
                                <el-form-item prop="boxStartNo">
                                     <el-input v-model="boxConf.boxStartNo" placeholder="请输入起始编号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2" tag="div">-</el-col>
                            <el-col :xs="11" :sm="11" :md="8" :lg="8" :xl="8">
                                <el-form-item prop="boxEndNo">
                                     <el-input v-model="boxConf.boxEndNo" placeholder="请输入结束编号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="装箱数量" required>
                        <el-row type="flex" class="row-bg">
                            <el-col :xs="11" :sm="11" :md="8" :lg="8" :xl="8">
                                <el-form-item prop="encasementCount">
                                     <el-input v-model="boxConf.encasementCount" placeholder="请输入装箱数量"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-button type="primary" @click="addBoxConf"  v-if="dialogConfig.type=='addBoxConf'">新增</el-button>
                      <el-button type="primary" @click="editBoxConf" v-if="dialogConfig.type=='editBoxConfig'">修改</el-button>
                    <el-button @click="changeDialog('boxConf')">返回</el-button>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import pulpworkInfo from 'views/operationManage/components/pulpworkInfo.vue';
import api from 'plugins/axios/api.js';
export default {
    directives:{
        focus:{
            inserted:function(el){
                el.focus();
            }
        }
    },
    components:{
        pulpworkInfo
    },
    data(){
        return {
            machineData:[],/**机器编号列表 */
            //搜索记录相关参数
            searchList:{
                plasmaNo:'',
                machineNo:'',
                plasmaScanTime:'',
                providerNo:''
            },
            //providerNoTemp 记录原始providerNo与扫描入库逻辑判定值1的交换临时更改数据
            providerNoTemp:'',
            //热合记录列表
            heatSealDataList:[],
            //献匠人信息
            pulpingManInfo:{},
            //弹出框样式
            dialogHeight: {
                height: document.documentElement.clientHeight - 230+ 'px',
                overflowY: 'auto',
              },
            //弹出框配置项
            dialogConfig:{
                isShow:false,
                title:'',
                type:'',
            },
            //分页相关参数
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            },
            //自动入库定时器
            taskTimer:null,
            //自动入库定时器类型 start|end 默认为start
            isSave:false,
            originTrigger:false,
            // 单条热合记录
            singleheatSeal:{
                    ptext:'开',
                    autofocusV:true,
                    autoPrint:true,
                    cardId:null,
                    boxNo: null,
                    createNurse: null,
                    createNurseName: null,
                    createTime: 1562148763000,
                    endTime: null,
                    lastWeght: null,
                    machineNo: "005",
                    modify_TIME: "2019-07-03 18:12:43.0",
                    plasmaBagPhoto: null,
                    plasmaBagTotal: "236",
                    plasmaBagWeiht: "35",
                    plasmaNo: null,
                    plasmaRecodeNo: null,
                    plasmaScanTime: null,
                    plasmaWeight: "201",
                    provideNoName: "杨云云",
                    providerNo: "1908964",
                    recheckWeight: null,
                    registerNo: "201907030001",
                    sealId: 123767,
                    simpleNo: null,
                    syndate: "2019-07-03 18:27:00.0"
            },
            loading:false,
            //装箱单配置列表
            boxConfList:[],
            boxConf:{},
            maker:[],/**厂家名称 */
            jylxId:[],/**浆员类型 */
            boxConfShow:false,/**是否显示装箱单按钮 */
            boxConfRules:{/**装箱单验证规则 */
                makeName:[{required: true, message: '请选择厂商名称', trigger: 'blur'}],
                immuneType:[{required: true, message: '请选择免疫类型', trigger: 'blur'}],
                plasmaStartNo:[{required: true, message: '请输入血浆起始编号', trigger: 'blur'}],
                plasmaEndNo:[{required: true, message: '请输入血浆结束编号', trigger: 'blur'}],
                boxStartNo:[{required: true, message: '请输入箱子起始编号', trigger: 'blur'}],
                boxEndNo:[{required: true, message: '请输入箱子结束编号', trigger: 'blur'}],
                encasementCount:[{required: true, message: '请输入装箱数量', trigger: 'blur'}]
            }
        }
    },
    created(){
        let self = this;
        self.heatSealList();
        self.boxConfShow=true;
        // api.getMenuAllSrc(sessionStorage.getItem('menuId')).then(res=>{
        //    res.content.forEach(el => {
        //        if(el.name==='装箱单配置'){
        //        }
        //    });
        // })
        api.getMachineData().then(res=>{
            self.machineData=res.content;
        });
        /**获取厂家名称码表 */
        api.getCodeData(27).then(res=>{
            self.maker=res.content;
        });
        /**获取免疫类型 */
        api.getCodeData(10).then(res=>{
            self.jylxId=res.content;
        })
    },
    computed:{
        tableHeight(){
            return this.$store.state.clientHeight-184;
        }
    },
    methods:{
        //卡号框获取焦点
        getFocus(){
            let self = this;
             self.$nextTick(()=>{
                 self.$refs['inputStoreBox'].focus();
             });
        },
        //获取热合记录列表
        heatSealList(){
            let self = this;
            self.loading=true;
            let params={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                pid:self.searchList.providerNo,
                mid:self.searchList.machineNo,
                sTime:self.searchList.plasmaScanTime,
                cid:self.searchList.plasmaNo
            }
            api.queryByPNoAndMNo(params).then(res=>{
                self.heatSealDataList = res.content.records;
                self.pagination.total=res.content.total
                self.loading=false;
            },error=>{
                self.loading=false;
            })
        },
        //查询扫描卡号相关信息回显
        searchInfo(){
             let self = this;
             self.loading=true;
             let params={
                cardId:self.singleheatSeal.cardId
            }
            let isf= self.singleheatSeal.autoPrint;
            api.queryByCardId(params).then(res=>{
                self.singleheatSeal = res.content;
                self.singleheatSeal.autoPrint = isf;
                if(self.singleheatSeal.autoPrint){
                    self.isSave=true;
                    self.autoTimerSave();
                }                          
                self.loading=false;
            },error=>{
                self.loading=false;
            })
        },
        //自动入库开始任务
        autoTimerSave(){
            let self = this;
            self.autoPrintSyscVal();
            self.taskTimer = setTimeout(sendToSave,2000);
           //定义自动入库发送保存方法
            function sendToSave() {
               //判断是否点击查询按钮
                if(self.isSave&&self.singleheatSeal.autoPrint)
                {
                    //进行提交操作
                    self.submitDialog();
                    clearTimeout(self.taskTimer);
                }
                        
         }
        },
        //自动打印开关
        autoPrintChange(){
             let self = this;
             if(self.singleheatSeal.autoPrint){
               self.isSave=true;
               self.autoTimerSave();
             }else{
                self.isSave=false;
             }
        },
        //根据自动入库开关同步input框val
        autoPrintSyscVal(){
            let self =this;
            if(!self.singleheatSeal.autoPrint){
                 self.singleheatSeal.recheckWeight ='';
             }else{
                 self.singleheatSeal.recheckWeight ='600';
             }
             if(!self.singleheatSeal.autoPrint){
                 self.singleheatSeal.lastWeght='';
             }else{
                self.singleheatSeal.lastWeght='600';
             }           
        },
        //点击编辑，填写热合记录
        updateDialog(type,row){
            let self = this;
            self.changeDialog(type,row)
            self.dialogConfig.isShow = true;
        },
        //改变弹框的值
        changeDialog(type,data){
            let self = this;
            self.dialogConfig.type=type;
            switch(type){
                case 'edit':
                self.singleheatSeal= data;
                if(self.providerNoTemp!=''&&self.singleheatSeal.providerNo==='1'){
                   self.singleheatSeal.providerNo=self.providerNoTemp;
                }
                self.dialogConfig.title="详细信息";
                break;
                case 'boxConf':
                self.dialogConfig.title="装箱单配置";
                self.getBoxConfList();
                break;
                case 'addBoxConf':
                 self.dialogConfig.title="新增装箱单记录";
                 self.boxConf={};
                break;
                case 'editBoxConfig':
                self.boxConf={
                    boxEndNo:data.boxEndNo,
                    boxStartNo:data.boxStartNo,
                    encasementCount:data.encasementCount,
                    immuneType:data.immuneType,
                    makeName:Number(data.makeName),
                    plasmaStartNo:data.plasmaStartNo,
                    plasmaEndNo:data.plasmaEndNo,
                    id:data.id
                }
                 self.dialogConfig.title="编辑装箱单记录";
                break;
                case 'inputStore':
                    //进行详细信息的框的展开
                     self.providerNoTemp  =self.singleheatSeal.providerNo
                     self.singleheatSeal.providerNo='1';
                     self.singleheatSeal.autofocusV = true;
                     self.dialogConfig.title="扫描入库";
                     self.singleheatSeal.autoPrint = true;
                     self.clearData();
                     self.autoPrintSyscVal();
                break;
            }
        },
        //原生自动聚焦失效，采用获取元素调用本身focus方法
        autofocusMethod(){
        //    let self = this;
        //        self.$nextTick(()=>{
        //         self.$refs['inputStoreBox'].$refs.input.focus(); 
        //        });  
        },
        //清空原始数据
        clearData(){
            let self = this;
              self.singleheatSeal.plasmaNo='';
              self. singleheatSeal.machineNo='';
              self. singleheatSeal.plasmaWeight='';
              self.singleheatSeal.plasmaBagWeiht='';
              self.singleheatSeal.plasmaBagTotal='';
              self.singleheatSeal.recheckWeight='';
              self.singleheatSeal.lastWeght='';
              self.singleheatSeal.plasmaScanTime='';
              self.singleheatSeal.createTime='';
              self.singleheatSeal.endTime='';
              self.singleheatSeal.createNurseName='';
              self.getFocus();
            },
        //点击切换分页
        handleCurrentChange(currentPage){
            this.pagination.currentPage=currentPage;
            this.heatSealList()
        },
        // 更改每条页面显示数量
        handleSizeChange(size){
             this.pagination.pageSize = size;
             this.heatSealList();
        },
        //点击提交
        submitDialog(){
            let self = this;
            api.heatSealUpdate(self.singleheatSeal).then(res=>{
            //    self.$message.success('');
        //        this.$message({
        //   message: '热合记录更新成功',
        //   type: 'success'
        // });
                if(self.dialogConfig.type==='inputStore'){
                    //进行数据清空
                     self.singleheatSeal.providerNo='1';

                     self.clearData();
                     //进行定时任务提交boolean初始 false不提交 true为提交
                     self.isSave=false;
                    //进行自动打印
                     self.autoSave(res.content);
                }else{
                     self.dialogConfig.isShow = false;
                }
            })
        },
        //自动入库
        autoSave(obj){
               let self = this;
               api.heatSealPrint(obj).then(res=>{
                //self.$message.success('热合记录打印成功');
             })
        },
        getBoxConfList(){//获取装箱单列表
        let self = this;
            api.boxConfList().then(res=>{
                self.boxConfList = res.content;
                self.boxConfList.forEach(boxConfItem=>{
                    self.maker.forEach(makerItem=>{
                        if(boxConfItem.makeName==makerItem.id){
                            boxConfItem.makerNameString=makerItem.name;
                        }
                    })
                    self.jylxId.forEach(jylxIdItem=>{
                        if(boxConfItem.immuneType==jylxIdItem.id){
                            boxConfItem.immuneTypeName= jylxIdItem.name;
                        }
                    })
                })
            })
        },
        addBoxConf(){//新增装箱单配置
            let self = this;
            api.addBoxConf(self.boxConf).then(res=>{
               // self.$message.success('新增装箱单成功');
                self.changeDialog('boxConf');
            })
        },
        editBoxConf(){
            let self = this;
            api.updateBoxConf(self.boxConf).then(res=>{
               // self.$message.success('修改装箱单成功');
                self.changeDialog('boxConf');
            })
        },
        deleteBoxConf(row){//删除装箱单配置
            let self = this;
            self.$confirm('是否删除装箱单配置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.deleteBoxConf({id:row.id}).then(res=>{
                    self.getBoxConfList();
                   //  self.$message.success('装箱单配置删除成功');
                })
            });
        },
        changeSwitch(val){
            this.singleheatSeal.autoPrint=false;
        }
    }
}
</script>
<style scoped>
.el-input__inner {
    -webkit-appearance: none;
    background-color: #FFFFFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 38px;
    line-height: 38px;
    outline: none;
    padding: 0 15px;
    margin-top:-3px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}
.line{
    text-align: center;
}
.el-checkbox__inner {
    border-block: black;
    width: 14px;
    height: 14px;
    background-color: #3AC1C4;
}
.advice{
         height: 30px;
         width: 30px;
         background-position: center;
         vertical-align: middle;
         margin-top: 0px;
               }
</style>


 <style type="text/css" media="screen">
        /**
 * Checkbox Four
 */
        
        .checkboxFour {
            width: 30px;
            height: 30px;
            background: #ddd;
            margin:0px 5px;
            border-radius: 100%;
            position: relative;
            -webkit-box-shadow: 0px 1px 3px rgba(241, 7, 7, 0.897);
            -moz-box-shadow: 0px 1px 3px rgba(241, 7, 7, 0.897);
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
        }
        /**
 * Create the checkbox button
 */
        
        .checkboxFour label {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 100px;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            -o-transition: all .5s ease;
            -ms-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 1;
            background: red;
            -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
        }
        /**
 * Create the checked state
 */
        
        .checkboxFour input[type=checkbox]:checked + label {
            background: #3AC1C4;
        }
  
    </style>


